<template>
  <div>
    <el-table :height="400" :data="tableDataList" style="width: 100%" border @sort-change="handleSortChange">
      <el-table-column align="center" prop="item" label="商品">
      </el-table-column>
      <!-- <el-table-column  sortable  align="center" prop="category" label="品类"> </el-table-column> -->
      <el-table-column align="center" prop="picUrl" label="图片">
        <template #default="scope">
          <image-preview :src="scope.row.picUrl" :width="40" :height="40" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="threeLevelColumn" label="三级类目">
      </el-table-column>
      <el-table-column align="center" prop="isNew" label="新老品">
      </el-table-column>
      <el-table-column sortable align="center" prop="salesAmount" label="销售金额(万)" :formatter="stateFormat">
      </el-table-column>
      <el-table-column :formatter="PerseFormat" align="center" prop="salesAmountRatio" width="120"
        :label="`销售金额占比(占top${topNumber})`">
      </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="salesAmountYoy" label="销售金额同比">
      </el-table-column>
      <el-table-column sortable align="center" prop="salesNumber" label="销售件数" :formatter="numberFormat">
      </el-table-column>
      <el-table-column sortable width="150" :formatter="PerseFormat" align="center" prop="salesNumberRatio"
        :label="`销售件数占总比(单款占top${topNumber})`">
      </el-table-column>
      <el-table-column sortable align="center" prop="avgSalePrice" label="件均单价" :formatter="stateFormat">
      </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="discountRate" label="折扣率">
      </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="returnRate" label="退货率">
      </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="returnYoy" label="退货同比">
      </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="sellOutRate" label="售罄率">
      </el-table-column>
      <el-table-column sortable :formatter="numberFormat" align="center" prop="visitors" label="商品访客数"> </el-table-column>
      <el-table-column sortable :formatter="PerseFormat" align="center" prop="payConversionRate" label="支付转化率">
      </el-table-column>
      <el-table-column sortable :formatter="numberFormat" align="center" prop="inventoryQuantity" label="当前库存数量">
      </el-table-column>
      <el-table-column sortable :formatter="stateFormat" align="center" prop="inventoryAmount" label="当前库存金额">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableDataList: {
      type: Array,
      default: () => [],
    },
    topNumber: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleSortChange(column) {
      let queryParams = {}
      /**
  排序方向 asc 升序 desc 降序
 
private String orderDirection;*/
      switch (column.order) {
        case "ascending":
          queryParams.isAsc = "true";
          break;
        case "descending":
          queryParams.isAsc = "false";
          break;
        default:
          queryParams.isAsc = null;
          break;
      }
      queryParams.property = column.prop; //查询字段是表格中字段名字
      this.$emit('handleSortChangeI', queryParams)
    }
  }
};
</script>